<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Document</title>
</head>
<style>
    .left1 {
        float: left;
       
    }

    .icon1 {
        width: 40px;
        height: 39px;
        line-height: 38px;
        background-color: rgb(51, 122, 183);
        border: 1px solid rgb(220, 220, 220);
        color: white;
        text-align: center;
    }

    .icon2 {
        width: 40px;
        height: 39px;
        line-height: 38px;
        background-color: white;
        border: 1px solid rgb(220, 220, 220);

        text-align: center;
    }

    .div1 {
        width: 40px;
        height: 60px;
        line-height: 60px;
        background-color: rgb(86, 173, 240);
        border: 1px solid rgb(220, 220, 220);
        color: white;
        text-align: center;
    }

    .left2 {
        float: left;
       
    }

    .div2 {

        width: 40px;
        height: 60px;
        background-color: white;
        border: 1px solid rgb(220, 220, 220);
        color: white;
        text-align: center;
    }


    .number {
        height: 30px;
        line-height: 30px;
        color: rgb(95, 176, 241)
    }

    .div_name {
        color: rgb(49, 157, 181);
        font-size: 17px;
        font-weight: bold;
    }

    .main-table {
        display: flex;
        /* overflow-x: scroll; */
      flex-wrap: nowrap;

    }



/* 弹窗 (background) */
.modal {
    display: none;
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
} /* 弹窗结束*/



    .exist1 {
        position: absolute;
        /* top:70px;
        left: 82px; */
        background-color: rgb(135, 209, 39);
        height: 29px;
        line-height: 29px;
        width: 125px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        color: white;
    }
    .exist1 .state{
        color: white;
        border: 1px solid white ;
        margin-left: 5px;
    }

    .exist1 .age{
            background-color: rgb(56, 55, 124);
            border-radius: 50%;
            width: 10px;
            height: 10px;
            color: white;
            margin-left: 20px;

    }

    .exist2 {
        position: absolute;
        /* top:159px;
        left: 215px; */
        background-color: rgb(75, 188, 255)!important;
        height: 58px;
        line-height: 58px;
        width: 127px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        color: white;
    }
    .exist2 .name{
        height: 30%;
        width: 100%;
        margin-top: -10px;
        margin-left: 5px;
        font-size: 20px;
        font-family: 'Courier New', Courier, monospace;
     
    }
    .exist2 .time{
        height: 70%;
        width: 100%;
        margin-top: 10px;
        margin-left: 25px;
    }



</style>

<body>


    <div class="left1">
        <div class="icon1"><span class="glyphicon glyphicon-dashboard"></div>
        <div class="div1">09</div>
        <div class="div1">10</div>
        <div class="div1">11</div>
        <div class="div1">12</div>
        <div class="div1">13</div>
        <div class="div1">14</div>
        <div class="div1">15</div>
        <div class="div1">16</div>
        <div class="div1">17</div>
        <div class="div1">18</div>

    </div>
    <div class="left2">
        <div class="icon2">
            <sapn class="glyphicon glyphicon-user"></sapn>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>
        <div class="div2">
            <div class="number">00</div>
            <div class="number">30</div>
        </div>


    </div>

    <div class="main-table"></div>



<!-- 弹窗 -->
<div id="myModal" class="modal">

  <!-- 弹窗内容 -->
  <div class="modal-content">
    <span class="close">&times;</span>
    姓名: <input type="text"><br>
        <br>
        性别: <input type="text"><br>
        <br>
        年龄: <input type="text"><br>
        <br>
        开始时间:

        <form action="">
            <label><input type="radio" name="sex">9:00</label>
            <label><input type="radio" name="sex">9:30</label>
            <label><input type="radio" name="sex">10:00</label>
            <label><input type="radio" name="sex">10:30</label>
            <label><input type="radio" name="sex">11:00</label>
            <label><input type="radio" name="sex">11:30</label>
            <label><input type="radio" name="sex">12:00</label>
            <label><input type="radio" name="sex">12:30</label>
            <label><input type="radio" name="sex">13:00</label>
            <label><input type="radio" name="sex">13:30</label>
            <label><input type="radio" name="sex">14:00</label>
            <label><input type="radio" name="sex">14:30</label>
            <label><input type="radio" name="sex">15:00</label>
            <label><input type="radio" name="sex">15:30</label>
            <label><input type="radio" name="sex">16:00</label>
            <label><input type="radio" name="sex">16:30</label>
            <label><input type="radio" name="sex">17:00</label>
            <label><input type="radio" name="sex">17:30</label>
            <label><input type="radio" name="sex">18:00</label>
            <label><input type="radio" name="sex">18:30</label>
        </form>

        <br>

        结束时间:
        <form action="">
            <label><input type="radio" name="sex" checked="checked">9:00</label>
            <label><input type="radio" name="sex">9:30</label>
            <label><input type="radio" name="sex">10:00</label>
            <label><input type="radio" name="sex">10:30</label>
            <label><input type="radio" name="sex">11:00</label>
            <label><input type="radio" name="sex">11:30</label>
            <label><input type="radio" name="sex">12:00</label>
            <label><input type="radio" name="sex">12:30</label>
            <label><input type="radio" name="sex">13:00</label>
            <label><input type="radio" name="sex">13:30</label>
            <label><input type="radio" name="sex">14:00</label>
            <label><input type="radio" name="sex">14:30</label>
            <label><input type="radio" name="sex">15:00</label>
            <label><input type="radio" name="sex">15:30</label>
            <label><input type="radio" name="sex">16:00</label>
            <label><input type="radio" name="sex">16:30</label>
            <label><input type="radio" name="sex">17:00</label>
            <label><input type="radio" name="sex">17:30</label>
            <label><input type="radio" name="sex">18:00</label>
            <label><input type="radio" name="sex">18:30</label>
        </form>
  </div>

</div>


    <div class="exist1" draggable="true">
        <div class="name"> <span class="state">离</span> 郭展颜 <span class="age">儿</span> </div>

    </div>
    <div class="exist2" draggable="true" >
            <div class="name">付城成</div>
            <div class="time">11:00--12:00</div>
    
        </div>



</body>

<script>










    var data_doc = ["李莉", "唐伟", "刘京沙", "郎宇", "冯伟", "乔班", "特聘专家", "夏春蕾", "未指定医生", "李莉", "唐伟", "刘京沙", "郎宇", "冯伟", "乔班", "特聘专家", "夏春蕾", "未指定医生"];
    var div_all = document.getElementsByClassName('main-table')[0];

    for (var i = 0; i < data_doc.length; i++) {


        Div3 = document.createElement("div");
        Div3.className = "div3 ";
        Div3.style.cssText = 'float:left;'
        div_all.appendChild(Div3);

        var div_name = document.createElement("div");
        div_name.className = 'div_name';
        div_name.innerHTML = data_doc[i];
        div_name.style.cssText = '   float: left; height: 39px; line-height: 38px;text-align: center;width: 132px; background: -webkit-linear-gradient(white, rgb(231, 231, 231)); box-shadow: gray;border: rgb(167, 164, 164) solid 0.5px;border-radius: 2px;';
        Div3.appendChild(div_name);



        for (var q = 0; q < 10; q++) {

            var Div_1 = document.createElement('div');
            Div_1.className = "div_1";
            Div_1.style.cssText = ' top:39px; position: relative; height: 30px;width: 132px; border-top:  rgb(220, 220, 220) solid 0.5px;border-left:  rgb(220, 220, 220) solid 0.5px;border-right:  rgb(220, 220, 220) solid 0.5px;'

            var Div_2 = document.createElement('div');
            Div_2.className = "div_2"
            Div_2.style.cssText = ' top:39px; position: relative; height: 30px; width: 132px; border-top: rgb(240, 239, 239) solid 0.1px; border-left: rgb(220, 220, 220) solid 0.5px; border-right:  rgb(220, 220, 220) solid 0.5px; border-bottom:  rgb(220, 220, 220) solid 0.5px;'

            Div3.appendChild(Div_1)
            Div3.appendChild(Div_2)
        }


        window.onload = function () {


            var Div_1 = document.getElementsByClassName("div_1");

            for (var i = 0; i < Div_1.length; i++) {
                Div_1[i].index = i;
                Div_1[i].onclick = function (ev) {


                    //alert("元素索引为" +this.index);
                    if (document.getElementsByClassName('div_1')[this.index].innerHTML == "") {

                        var modal = document.getElementsByClassName("modal")[0];
                        var close =document.getElementsByClassName("close")[0];
                        var input=document.getElementsByTagName("input");
                        modal.style.display = " block";
                        modal.style.offsetTop = 'ev.elientLTop'
                        modal.style.offsetRight = 'ev.elientRight'

                        close.onclick=function(){
                            modal.style.display = " none";
                            
                        }

                        var timeNumber = 2;

                        switch (timeNumber) {
                            case 0.5:
                                height = '30px'
                                break;
                            case 1:
                                height = '60px'
                                break;
                            case 1.5:
                                height = '90px'
                                break;
                            case 2:
                                height = '120px'
                                break;
                            case 2.5:
                                height = '150px'
                                break;

                        }

                        document.getElementsByClassName('div_1')[this.index].appendChild(frame);



                    } else {
                        return false
                    }
                }
            }


        }


    }




    var Div_2 = document.getElementsByClassName("exist1");

    for (var i = 0; i < Div_2.length; i++) {
        Div_2[i].index = i;
        Div_2[i].onmouseover = function () {
            // console.log( Div_2[this.index].index)

            Div_2[this.index].addEventListener("dragstart", function (event) {
                // event.preventDefault();

                //dataTransfer.setData()方法设置数据类型和拖动的数据
                event.dataTransfer.setData("Text", event.target.className);

                console.log(event.target.className)
                console.log(event.target)
                console.log(event.target.id)


            });

            //在拖动p元素的同时,改变输出文本的颜色
            document.addEventListener("drag", function (event) {

            });

            // 当拖完p元素输出一些文本元素和重置透明度
            document.addEventListener("dragend", function (event) {

                // event.target.style.opacity = "1";
            });

            /* 拖动完成后触发 */
            // 当p元素完成拖动进入droptarget,改变div的边框样式
            document.addEventListener("dragenter", function (event) {
                if (event.target.className == "div_1" || event.target.className == "div_2") {

                }
            });

            // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
            document.addEventListener("dragover", function (event) {
                event.preventDefault();
            });
            // 当可拖放的p元素离开droptarget，重置div的边框样式
            document.addEventListener("dragleave", function (event) {
                if (event.target.className == "div_1" || event.target.className == "div_2") {

                }
            });


            document.addEventListener("drop", function (event) {
                event.preventDefault();
                if (event.target.className == "div_1" || event.target.className == "div_2") {



                    var data = event.dataTransfer.getData("Text");

                    console.log(event.target);
                    console.log(document.getElementsByClassName(data)[0])  //拖动对象
                    console.log(data)   //拖动对象的className  （具体看前面定义）
                    event.target.appendChild(document.getElementsByClassName(data)[0]);
                }
            });


        }
    }//for


    var Div_3 = document.getElementsByClassName("exist2");

for (var i = 0; i < Div_3.length; i++) {
    Div_3[i].index = i;
    Div_3[i].onmouseover = function () {
        // console.log( Div_2[this.index].index)

        Div_3[this.index].addEventListener("dragstart", function (event) {
            // event.preventDefault();

            //dataTransfer.setData()方法设置数据类型和拖动的数据
            event.dataTransfer.setData("Text", event.target.className);

            console.log(event.target.className)
            console.log(event.target)
            console.log(event.target.id)


        });

        //在拖动p元素的同时,改变输出文本的颜色
        document.addEventListener("drag", function (event) {

        });

        // 当拖完p元素输出一些文本元素和重置透明度
        document.addEventListener("dragend", function (event) {

            // event.target.style.opacity = "1";
        });

        /* 拖动完成后触发 */
        // 当p元素完成拖动进入droptarget,改变div的边框样式
        document.addEventListener("dragenter", function (event) {
            if (event.target.className == "div_1" || event.target.className == "div_2") {

            }
        });

        // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
        document.addEventListener("dragover", function (event) {
            event.preventDefault();
        });
        // 当可拖放的p元素离开droptarget，重置div的边框样式
        document.addEventListener("dragleave", function (event) {
            if (event.target.className == "div_1" || event.target.className == "div_2") {

            }
        });


        document.addEventListener("drop", function (event) {
            event.preventDefault();
            if (event.target.className == "div_1" || event.target.className == "div_2") {



                var data = event.dataTransfer.getData("Text");

                console.log(event.target);
                console.log(document.getElementsByClassName(data)[0])  //拖动对象
                console.log(data)   //拖动对象的className  （具体看前面定义）
                event.target.appendChild(document.getElementsByClassName(data)[0]);
            }
        });


    }
}//for




    //       window.onload=  function (){

    //             // var ul = document.getElementsByClassName("list")[0];
    //             //    var ul_child = ul.getElementsByTagName('li');
    //             var ul_child = document.getElementsByTagName('li');
    //                for (var i = 0; i < ul_child.length; i++) {
    //                    ul_child[i].index = i;
    //                    ul_child[i].onclick = function(){
    //                        var j = this.index;
    //         　               alert("元素索引为" +this.index);
    //         }
    //     }
    // }


</script>



<!-- <script>
    var contanier = document.querySelector('.main-table');
    contanier.addEventListener('dragstart', function (e) {
        for (let el = e.target; el != e.currentTarget; el = el.parentNode) {
            console.log(e.target)
            if (el.className.indexOf('div_1') > -1 || el.className.indexOf('div_2') > -1) {

                break;
            }
        }
    })

</script> -->

</html>